<template>
  <div>
    <!-- <h1>{{ message }}</h1> -->
    <!-- Display this.$store.review.reviewList here -->

    <template>
      <div class="list">
        <el-table
          :data="reviewList"
          style="width: 100%"
          v-loading="loading"
          :default-sort="{ prop: 'reviewTime', order: 'descending' }"
        >
          <el-table-column type="expand" prop="extend">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="文章ID">
                  <span>{{ props.row.articleId }}</span>
                </el-form-item>
                <el-form-item label="文章名称">
                  <span>{{ props.row.title }}</span>
                </el-form-item>
                <el-form-item label="审核状态">
                  <!-- 根据 result 的值动态渲染审核状态 -->
                  <el-tag v-if="props.row.userId == -1">未分配</el-tag>
                  <el-tag v-else-if="props.row.result == 0" type="success"
                    >通过</el-tag
                  >
                  <el-tag v-else-if="props.row.result == 1" type="danger"
                    >未通过</el-tag
                  >
                  <el-tag v-else type="warning">待审核</el-tag>
                </el-form-item>
                <el-form-item label="审核批注">
                  <span>{{ props.row.comment }}</span>
                </el-form-item>
                <el-form-item label="审核时间">
                  <span>{{ props.row.reviewTime }}</span>
                </el-form-item>
                <el-form-item label="审核人">
                  <span
                    >{{ props.row.username }} | ID:{{ props.row.userId }}</span
                  >
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="文章名称" prop="title"> </el-table-column>
          <el-table-column label="审核状态" prop="result" align="center">
            <template slot-scope="scope">
              <!-- 根据 result 的值动态渲染审核状态 -->
              <el-tag v-if="scope.row.userId == -1">未分配</el-tag>
              <el-tag v-else-if="scope.row.result == 0" type="success"
                >通过</el-tag
              >
              <el-tag v-else-if="scope.row.result == 1" type="danger"
                >未通过</el-tag
              >
              <el-tag v-else type="warning">待审核</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="审核时间" prop="reviewTime" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.result === -1">--</span>
              <!-- <span v-else-if="scope.row.result === 1"></span> -->
              <span v-else>{{ scope.row.reviewTime }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="审核人员"
            v-if="$store.state.user.type == 4"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.userId === -1">--</span>
              <!-- <span v-else-if="scope.row.result === 1"></span> -->
              <span v-else>{{ scope.row.username }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="pageBlock">
          <el-pagination
            layout="prev, pager, next, total"
            :page-size="pageSize"
            :current-page.sync="page"
            :total="listTotal"
            :pager-count="7"
            v-if="page < 5"
            @current-change="updateList()"
          >
          </el-pagination>
          <el-pagination
            layout="prev, pager, next"
            :page-size="pageSize"
            v-model:current-page="page"
            :pager-count="6"
            :total="listTotal"
            v-else
          ></el-pagination>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { mapState } from 'vuex'; // 如果使用 Vuex 的话

export default {
  data() {
    return {
      loading: true,
      page: 1,
      pageSize: 10,
    };
  },
  computed: {
    // 使用 mapState 获取全局的 user/SET_USER_ID
    ...mapState('review', ['reviewList', 'listTotal']),
    ...mapState('user', ['id', 'type']),
  },
  watch: {
    // page() {
    //   console.log('page变动');
    //   console.log(this.page);
    //   this.updateList();
    //   console.log(this.page);
    //   console.log('page更新');
    // },
  },

  async mounted() {
    console.log('reviewList的mounted触发');
    this.loading = true;
    await this.updateList();
    this.loading = false;
    console.log(this.listTotal);
    console.log('reviewList的mounted结束');
  },

  created() {
    // 在 created 生命周期钩子中调用 tasks 方法
    // this.fetchTasks();
  },
  methods: {
    async updateList() {
      console.log('准备更新审核列表');
      console.log(this.page);
      if (this.type == 4) {
        await this.$store.dispatch('review/fetchAll', {
          reviewId: -1,
          page: this.page,
          pageSize: this.pageSize,
        });
      } else {
        await this.$store.dispatch('review/fetchList', {
          reviewId: this.id,
          page: this.page,
          pageSize: this.pageSize,
        });
      }

      console.log('审核列表更新完成');
    },
  },
};
</script>

<style scoped>
/* Your component's styles here */

.demo-table-expand {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-left: 20px;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
/* .demo-table-expand  */
.el-form-item {
  flex: 1 0 48%;
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.demo-table-expand .el-form-item span {
  color: #333; /* 深灰色，提高文字清晰度 */
}

.demo-table-expand .el-form-item .el-form-item__label {
  font-weight: bold; /* 加粗标签文字，提高清晰度 */
}

/* 添加 hover 效果 */
.demo-table-expand .el-form-item:hover {
  background-color: #f0f8ff; /* 淡蓝色背景，用于提高 hover 效果 */
}
.pageBlock {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px; /* 或适当的高度值，保证垂直居中 */
}

.list {
  padding: 30px;
  border: 3px #ccc solid;
  border-radius: 15px;
  background-color: white;
  width: 90%;
  margin: 30px auto;
}
</style>
